<template>
  <el-card class="cc">
    <div class="Top">
      <div class="title">{{ props.title }}</div>
      <div class="value">{{ props.value }}</div>
      <div class="middle">
        <!-- 默认插槽 -->
        <slot></slot>
      </div>
      <div class="card-line"></div>
      <div class="card-footer">
        <!-- 具名插槽 -->
        <slot name="footer"></slot>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "CommonCard",
};
</script>
<script lang="ts" setup>
/* 接收传过来的参数 */
let props = defineProps(["title", "value"]);
</script>

<style lang="scss" scoped>
.cc {
  background-color: #100c2a;
  .Top {
    .title {
      font-size: 12px;
      color: lightblue;
    }
    .value {
      font-size: 25px;
      color: gold;
      letter-spacing: 1px;
      margin: 5px 0;
    }
    .middle {
      height: 50px;
    }
    .card-line {
      border: 1px solid #eee;
      margin: 10px 0;
    }
    .card-footer {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
